<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>菜单列表</title>
<%@include file="/WEB-INF/admin/head.jsp"%>
<%@include file="/WEB-INF/admin/common.jsp"%>
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>

	<div class="x-body">
		
	
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
		<button class="layui-btn " onclick="x_admin_show('新增菜单','${basePath}/admin/menu/add.do')" ><i class="layui-icon"></i>增加</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all">全部展开</button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all">全部关闭</button>
		<span class="x-right" style="line-height: 40px">共有数据：88 条</span>
		 </xblock>
		<table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>
		
	</div>

	<script>
		layui.config({
			base: "${basePath }/js/",
		})	
		layui.use([ 'form','treeTable','layer','code','form'], function() {
			var $ = layui.$,
			form = layui.form,
			layer = layui.layer,
			treeTable = layui.treeTable;
			var	re ;
			$.ajax({
	             type: "POST",
	             url: "${basePath }/admin/menu/listsJson.do",
	             contentType: 'application/json;charset=utf-8',
	             success: function(res){
	            		var data=res.data.menuLists;
	            	 re= treeTable.render({
	     				elem: '#tree-table',
	     				data: data,
	     				icon_key: 'title',
	     				is_checkbox: true,
	     				//checked: {
	     				//	key: 'id',
	     				//	data: [0,1,4,10,11,5,2,6,7,3,8,9],
	     				//},
	     				end: function(e){
	     					form.render();
	     				},
	     				cols: [
	     					{
	     						key: 'title',
	     						title: '名称',
	     						width: '400px',
	     						template: function(item){
	     							if(item.pid == 0){
	     								return '<span style="color:red;">'+item.title+'</span>';
	     							}else{
	     								return '<span style="color:green;">'+item.title+'</span>';
	     							}
	     						}
	     					},
	     					{
	     						key: 'id',
	     						title: 'ID',
	     						width: '100px',
	     						align: 'center',
	     					},
	     					{
	     						key: 'pid',
	     						title: '父ID',
	     						width: '100px',
	     						align: 'center',
	     					},
	     					{
	     						key: 'sort',
	     						title: '排序',
	     						width: '100px',
	     						align: 'center',
	     					},
	     					{
	     						title: '操作',
	     						align: 'center',
	     						template: function(item){
	     							return '<a  href="#" lay-filter="add">添加子菜单</a> | <a  href="#" lay-filter="editMenu" >编辑</a>';
	     						}
	     					}
	     				]
	     			});
	            	 
	             },
	             error:function(e){
	                
	             }
	         });
			

			// 监听自定义
			treeTable.on('tree(add)',function(data){
				x_admin_show('新增菜单','${basePath}/admin/menu/add.do?pid='+data.item.id);
			})
			
			treeTable.on('tree(editMenu)',function(data){
				
				x_admin_show('编辑菜单','${basePath}/admin/menu/editMenu.do?id='+data.item.id);
			})
			
			
			
			// 获取选中值，返回值是一个数组（定义的primary_key参数集合）
			$('.get-checked').click(function(){
				layer.msg('选中参数'+treeTable.checked(re).join(','))
			})
			// 刷新重载树表（一般在异步处理数据后刷新显示）
			$('.refresh').click(function(){
				re.data.push({"id":50,"pid":0,"title":"1-4"},{"id":51,"pid":50,"title":"1-4-1"});
				treeTable.render(re);
			})
			// 全部展开
			$('.open-all').click(function(){
				treeTable.openAll(re);
			})
			// 全部关闭
			$('.close-all').click(function(){
				treeTable.closeAll(re);
			})
			

		});
		
		
		/*用户-删除*/
		function member_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				//发异步删除数据
				$(obj).parents("tr").remove();
				layer.msg('已删除!', {
					icon : 1,
					time : 1000
				});
			});
		}

		function delAll(argument) {

			var data = tableCheck.getData();

			layer.confirm('确认要删除吗？' + data, function(index) {
				//捉到所有被选中的，发异步进行删除
				layer.msg('删除成功', {
					icon : 1
				});
				$(".layui-form-checked").not('.header').parents('tr').remove();
			});
		}
	</script>

</body>

</html>